<template>
	<view class="">
		<u-navbar :is-back="true" :border-bottom="false" height="46" title="三方服务对比" title-color="#333" :title-size="36"
			:title-bold="true">
			<view class="navbar-right" slot="right">
				<view class="message-box right-item" style="margin-right: 30rpx;color: #c40200;" @click="GoQxdb">
					取消对比
				</view>
			</view>
		</u-navbar>
		<view class="cont-warp">
			<view class="cont-box">
				<view class="cont-bg">
					<view class="cont_list_one">
						<text>公司名称</text>
						<view class="cont_box_warp">
							<text v-for="item in contrastList">{{item.comname}}</text>
						</view>
					</view>
					<view class="cont_list">
						<view class="cont_list_box">
							<text>公司图片</text>
							<view class="cont_box_warp">
								<text v-for="item in contrastList"
									style="padding: 10rpx; border-radius: 40rpx; overflow: hidden; ">
									<image :src="item.logo" mode="widthFix" style="display: flex;"></image>
								</text>
							</view>
						</view>
						<view class="cont_list_box">
							<text>公司类型</text>
							<view class="cont_box_warp">
								<text v-for="item in contrastList">{{item.gslx}}</text>
							</view>
						</view>
						<view class="cont_list_box">
							<text>公司简称</text>
							<view class="cont_box_warp">
								<text v-for="item in contrastList">{{item.comsname}}</text>
							</view>
						</view>
						<view class="cont_list_box">
							<text>注册资本</text>
							<view class="cont_box_warp">
								<text v-for="item in contrastList">{{item.zczb||"未知"}}</text>
							</view>
						</view>
						<view class="cont_list_box">
							<text>成立日期</text>
							<view class="cont_box_warp">
								<text
									v-for="item in contrastList">{{$u.timeFormat(item.clrq, 'yyyy-mm-dd')||"未知"}}</text>
							</view>
						</view>
						<view class="cont_list_box">
							<text>所在区域</text>
							<view class="cont_box_warp">
								<text v-for="item in contrastList">{{item.comdq}}</text>
							</view>
						</view>
						<view class="cont_list_box">
							<text>公司简介</text>
							<view class="cont_box_warp">
								<text v-for="item in contrastList">{{item.comdesc.substring(0,30)}}</text>
							</view>
						</view>
						<view class="cont_list_box">
							<text>经营范围</text>
							<view class="cont_box_warp">
								<text v-for="item in contrastList">{{item.jyfw.substring(0,30)}}</text>
							</view>
						</view>
						<view class="cont_list_delet">
							<text></text>
							<view class="cont_box_warp">
								<text v-for="item in contrastList" @click="Godelet(item.id)"
									style="color: #c40200;">一</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cont-tj" @click="Gotjdb">
				<text>+</text>添加对比
			</view>
			<u-toast ref="uToast" />
		</view>

	</view>
</template>

<script>
	import provinces from "uview-ui/libs/util/province.js";
	export default {
		data() {
			return {
				contrastList: []
			}
		},
		onLoad() {
			this.ContrastList()
		},
		methods: {
			async ContrastList() {
				let params = {
					cmd: 'zCompanyCart_list_proc',
					ak: this.$store.state.token,
					para: {

					},
				}
				const res = await this.$u.api.device(params)
				this.contrastList = res.Data.Data.splice(0, 2)
				for (var value of this.contrastList.values()) {
					value.logo = this.baseUrl + value.logo
					if (value.zczb) {
						value.zczb = value.zczb + "万元"
					}
					value.comdq = value.comdq.slice(0, 2)
					value.comdq = provinces.filter(item => item.value == value.comdq)[0].label
				}
			},
			async Godelet(id) {
				let params = {
					cmd: 'zCompanyCart_delete_proc',
					ak: this.$store.state.token,
					para: {
						id: id
					},
				}
				const res = await this.$u.api.device(params)
				this.ContrastList()
				if (this.contrastList.length == 1) {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			async GoQxdb() {
				let params = {
					cmd: 'zCompanyCart_delete_proc',
					ak: this.$store.state.token,
					para: {
						id: 1
					},
				}
				const res = await this.$u.api.device(params)
				this.$refs.uToast.show({
					title: res.Message,
					duration: 500,
					callback() {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			Gotjdb(){
				if(this.contrastList.length<2){
					uni.navigateBack({
						delta: 1
					})
				}else{
					this.$refs.uToast.show({
					title: "对比数量上限",
					duration: 1000,
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.cont-warp {
		padding: 20rpx 30rpx;
		background: linear-gradient(180deg, #F8FBFF, #D6E9FD);

		.cont-box {
			padding: 20rpx;
			border-radius: 35rpx;
			background-color: #fff;

			.cont-bg {
				border-radius: 28rpx;
				background-color: #F2F8FF;
				height: 100%;
				padding-bottom: 30rpx;
				box-shadow: 0 2rpx 20rpx 2rpx #b2c0ca inset;
				background: linear-gradient(to right, #CDE4FF 50%, #7EBDFF 50%);
				background: -webkit-linear-gradient(180deg, #7EBDFF 37.5%, rgba(0, 0, 0, 0) 37.5%), -webkit-linear-gradient(180deg, #CDE4FF 75%, #F2F8FF 75%);

				// background:url(../../../static/server/bg.png) no-repeat;
				// background-size: 100% 100%;
				.cont_list_box {
					display: flex;
					padding: 30rpx 30rpx 30rpx 50rpx;
					background-color: rgba($color: #FFFCF9, $alpha: 0.6);
					margin: 30rpx -30rpx;
					border: 2rpx solid #FFFFFF;
					box-shadow: 0px 2rpx 5rpx 0px rgba(102, 102, 102, 0.41);
					border-radius: 15rpx;

					&:last-child {
						margin-bottom: 0rpx;
					}

					&:first-child {
						margin-top: 0rpx;
					}

					.cont_box_warp {
						flex: 1;
						display: flex;

						text {
							width: 50%;
							text-align: center;

							&:last-child {
								color: #0D56A2;
							}

							image {
								width: 100%;
							}
						}
					}

					>text {
						display: flex;
						align-items: center;
						width: 22.5%;
						text-align: left;
					}
				}

				.cont_list_delet {
					display: flex;

					>text {
						display: flex;
						align-items: center;
						width: 25%;
						text-align: left;
					}

					// padding: 30rpx 0rpx 30rpx 20rpx;
					.cont_box_warp {
						flex: 1;
						display: flex;

						text {
							width: 50%;
							text-align: center;

							&:last-child {
								color: #0D56A2;
							}
						}
					}
				}

				.cont_list_one {
					display: flex;
					padding: 30rpx 0rpx 30rpx 20rpx;

					.cont_box_warp {
						flex: 1;
						display: flex;

						text {
							width: 50%;
							text-align: center;

							&:last-child {
								color: #0D56A2;
							}
						}
					}

					>text {
						display: flex;
						align-items: center;
						width: 23%;
						text-align: left;
					}
				}
			}
		}

	}

	.cont-tj {
		background-color: rgb(79, 165, 255);
		padding: 32rpx 80rpx 32rpx 94rpx;
		color: rgb(255, 255, 255);
		font-size: 30rpx;
		line-height: 29rpx;
		margin: 0 auto;
		margin-top: 36rpx;
		border-radius: 46rpx;
		width: 60%;
		text-align: center;

		text {
			margin-top: 3rpx;
			display: inline-block;
			margin-right: 15rpx;
			font-size: 45rpx;
			width: 24rpx;
			height: 24rpx;
		}
	}

	/deep/.u-navbar-fixed {
		background: #F8FBFF !important;
	}
</style>
